import React, { useState, useEffect, useContext } from 'react'
import { Card } from '&/appComponents/Antd'
import { Table } from 'antd'
import Echarts from '&/baseUI/EChartsUI'
import { Context } from '../context'
import dayjs from 'dayjs'

import './index.scss'
const Content = ({ data }) => {
  const { paramsData } = useContext(Context)
  const [option, setOption] = useState()
  const [options, setOptions] = useState()
  const [optionss, setOptionss] = useState()
  //用电量刷色图
  const columns = [
    {
      width: 100,
      title: '时间',
      dataIndex: 'ent_name',
      key: 'ent_name',
      align: 'center'
    }
  ]
  //日间用电量和夜间用电量的变化趋势、占比图
  useEffect(() => {
    if (data) {
      // console.log(data,"data--");
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: [
            '原始日间用电',
            '原始夜间用电',
            '日间用电同比',
            '夜间用电同比',
            '日间用电环比',
            '夜间用电环比'
          ],
          padding: [0, 100, 0, 0]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%'
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0.01],
          data: data?.time_list
        },
        yAxis: [
          {
            type: 'value'
          },
          {
            type: 'value',
            // name: 'Temperature',
            // min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '原始日间用电',
            type: 'bar',
            data: data?.cur_data?.day
          },
          {
            name: '原始夜间用电',
            type: 'bar',
            data: data?.cur_data?.night
          },
          {
            name: '日间用电同比',
            type: 'line',
            yAxisIndex: 1,
            data: data?.same_data?.day
          },
          {
            name: '夜间用电同比',
            type: 'line',
            yAxisIndex: 1,
            data: data?.same_data?.night
          },
          {
            name: '日间用电环比',
            type: 'line',
            data: data?.ring_data?.day,
            yAxisIndex: 1
          },
          {
            name: '夜间用电环比',
            type: 'line',
            data: data?.ring_data?.night,
            yAxisIndex: 1
          }
        ]
      }
      setOption(option)
      const options = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '0%',
          left: 'center'
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '日间用电总量', value: data?.pie_data?.day?.toFixed(2) },
              { name: '夜间用电总量', value: data?.pie_data?.night.toFixed(2) }
            ]
          }
        ]
      }
      setOptions(options)
    }
  }, [data])
  //生产模式
  useEffect(() => {
    setOptionss({})
    if (paramsData.time_type === '3') {
      const production_mode = data?.production_mode
      if (production_mode?.length) {
        const optionss = {
          tooltip: {
            show: false
          },
          visualMap: {
            // min: 0,
            // max: 10000,
            categories: [
              '严重污染',
              '重度污染',
              '中度污染',
              '轻度污染',
              '良',
              '优'
            ],
            pieces: [
              { value: 0, label: '当日无生产', color: 'red' },
              { value: 1, label: '日间生产', color: '#1a6840' },
              { value: 2, label: '夜间生产', color: 'black' },
              { value: 3, label: '全天生产', color: '#5e5314' }
            ],
            type: 'piecewise',
            orient: 'horizontal',
            left: 'center',
            top: 5,
            formatter: function (value, value2) {
              console.log(value, value2)
              return 'asdasd' // 范围标签显示内容。
            }
          },
          calendar: {
            top: 60,
            left: 30,
            right: 30,
            bottom: 10,
            cellSize: ['auto', 13],
            range: dayjs(production_mode[0][0]).get('year'),
            itemStyle: {
              borderWidth: 0.5
            },
            yearLabel: { show: false },
            dayLabel: {
              firstDay: 1,
              nameMap: 'ZH'
            },
            monthLabel: {
              show: true,
              nameMap: 'ZH'
            }
          },
          series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            data: production_mode
          }
        }
        setOptionss(optionss)
      }
    }

    if (paramsData.time_type === '4') {
      const mode_ratio = data?.mode_ratio
      const time_list = data?.time_list
      if (mode_ratio && time_list?.length) {
        const { all_ratio, day_ratio, night_ratio, no_ratio } = mode_ratio
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: time_list
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '全天生产天数占比',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: all_ratio
            },
            {
              name: '日间生产天数占比',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: day_ratio
            },
            {
              name: '夜间生产天数占比',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: night_ratio
            },
            {
              name: '当日无生产天数占比',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: no_ratio
            }
          ]
        }
        setOptionss(option)
      }
    }
  }, [data])
  return (
    <div
      style={{
        display: 'flex',
        flex: 1,
        height: '100%',
        flexDirection: 'column',
        gap: '10px'
      }}
      className="content"
    >
      <Card
        size="small"
        title="用电量刷色图"
        style={{ flex: 1 }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <Table
          bordered
          columns={columns}
          dataSource={[]}
          scroll={{ y: '22vh' }}
          pagination={false}
        ></Table>
      </Card>
      <Card
        size="small"
        title="日间用电量和夜间用电量的变化趋势、占比图"
        style={{ flex: 1 }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <div className="echarts">
          <div className="echarts-left">
            <Echarts option={option}></Echarts>
          </div>
          <div className="echarts-right">
            <Echarts option={options}></Echarts>
          </div>
        </div>
      </Card>
      <Card
        size="small"
        title="生产模式"
        style={{ flex: 1 }}
        bodyStyle={{ height: 'calc(100% - 38px)' }}
      >
        <Echarts option={optionss}></Echarts>
      </Card>
    </div>
  )
}
export default Content
